<template>
  <div class="tronActivity">
    <div class="banner">
      <p class="center">{{ $t('tronActivity.whereNext') }}</p>
      <p class="center">{{ $t('tronActivity.newdexReady') }}</p>
    </div>
    <div class="cont">
      <div class="choice center">
        <p style="color: #c62734;">{{ $t('tronActivity.battleAmong') }}</p>
        <p>{{ $t('tronActivity.blockchainNewdex') }}</p>
        <div class="tagCont flex">
          <div class="tag flexc" :class="{'checked':item.check}" v-for="(item, index) in list" :key="index" @click="handleCheck(index)">
            <img :src="item.img" alt="">
          </div>
        </div>
        <p>{{ $t('tronActivity.guessToWin') }}</p>
        <el-button type="danger" class="btn" @click="handleToVote" :disabled="selectedChain ? true : false">
          {{ $t('public.sure') }}
        </el-button>
        <p class="center mt15" v-if="selectedChain">{{ $t('tronActivity.youChose', {change: list[selectedChain - 1].name}) }}</p>
        <!-- <p class="center" style="color:#C62734">{{ $t('tronActivity.unfortunately') }}</p>
        <p class="center" style="color:#278EDA">{{ $t('tronActivity.Congratulations') }}</p> -->
        <div class="resultStatistics">
          <div class="numChart" id="numChart"></div>
        </div>
      </div>
      <div class="contWord">
        <p class="center contWord1" style="color: #c62734;">{{ $t('tronActivity.benefitsCarnivalWeek') }}</p>
        <p class="center contWord2">{{ $t('tronActivity.julyAugust') }}</p>
        <div class="contList flex">
          <div class="imgIcon">
            <img src="@/assets/img/activity/tron/word1.png" alt="">
          </div>
          <div class="word">
            <p class="font24">{{ $t('tronActivity.luckyDrawComing') }}</p>
            <p class="font16">ETH？  TRON？  COSMOS?   Polkadot?</p>
            <p class="font16">{{ $t('tronActivity.participateIn') }}</p>
            <p>
              {{ $t('tronActivity.click') }}
              <a href="https://twitter.com/NewdexOfficial" class="colorThis" target="_blank">https://twitter.com/NewdexOfficial</a>
            </p>
          </div>
        </div>
        <div class="contList flex">
          <div class="imgIcon">
            <img src="@/assets/img/activity/tron/word2.png" alt="">
          </div>
          <div class="word">
            <p class="font24">{{ $t('tronActivity.newVersion') }}</p>
            <p class="font16">{{ $t('tronActivity.followWeibo') }}</p>
            <p class="font16">{{ $t('tronActivity.followWeibo1') }}</p>
          </div>
        </div>
        <div class="contList flex">
          <div class="imgIcon">
            <img src="@/assets/img/activity/tron/word3.png" alt="">
          </div>
          <div class="word">
            <p class="font24">{{ $t('tronActivity.meansMining') }}</p>
            <p class="font16">{{ $t('tronActivity.duringTheActivity') }}</p>
            <p>
              {{ $t('tronActivity.click') }}
              <a href="http://www.chainnode.com" class="colorThis" target="_blank">http://www.chainnode.com</a>
            </p>
          </div>
        </div>
      </div>
      <p class="center" style="color: #999;">{{ $t('activity.remarksCont2') }}</p>
    </div>
  </div>
</template>

<script>
import { authorized } from '@/utils/validate';
import numChart from './numChart'

export default {
  name: 'tronActivity', // 波场预热活动
  data() {
    return {
      list: [{
        id: 0,
        name: 'ETH',
        img: '/static/activity/tron/check1.png',
        check: false,
      }, {
        id: 1,
        name: 'TRON',
        img: '/static/activity/tron/check2.png',
        check: true,
      }, {
        id: 2,
        name: 'cosmos',
        img: '/static/activity/tron/check3.png',
        check: false,
      }, {
        id: 3,
        name: 'Polkadot',
        img: '/static/activity/tron/check4.png',
        check: false,
      }],
      timer: null,
      selectedChain: '',
    }
  },
  components: {},
  props: {
  },
  watch: {
    '$store.state.app.language': function change() {
      this.handleGetProportion();
    },
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.handleGetProportion();
      },
      deep: true,
    },
  },
  computed: {},
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
    this.handleGetProportion();
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
    }
  },
  methods: {
    // 获取选择占比
    handleGetProportion() {
      this.$http.get('/promotions/getNextPublicChainPercent').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.selectedChain = res.selectedChain;
        if (res.selectedChain) {
          this.handleCheck(res.selectedChain - 1, 'reset');
        } else {
          this.list.forEach((v) => {
            const vv = v;
            vv.check = false;
          })
          this.list.find(vvv => vvv.id === 1).check = true;
        }
        const listData = res.chains.map(v => v.votePercent * 100);
        numChart.init({
          self: this,
          data: listData
        });
        this.timer = setTimeout(() => {
          this.handleGetProportion();
        }, 120000);
      });
    },
    // 选择公链
    handleCheck(index, type) {
      if (this.selectedChain && type !== 'reset') return;
      this.list.forEach((v) => {
        const vv = v;
        vv.check = false;
      })
      this.list.find(vvv => vvv.id === index).check = true;
    },
    // 投票
    handleToVote() {
      const scatter = this.$store.state.app.scatter;
      if (scatter && scatter.identity) {
        if (scatter.chain !== 'eos') {
          this.$message.warning(this.$t('tronActivity.plstoEos'));
          return;
        }
        authorized(this, (code, res) => {
          if (code === 'error') { // 授权错误
            console.log(res); // eslint-disable-line
            return;
          }
          this.handleSubmit();
        });
      } else {
        this.handleWalletPermission();
      }
    },
    // 提交
    handleSubmit() {
      const checked = this.list.find(v => v.check === true).id;
      const params = {
        selectedChain: checked + 1
      }
      this.$http.post('/promotions/choiceNextPublicChain', params).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.$message.success(this.$t('tronActivity.voteSuccess'));
        this.handleGetProportion();
      });
    },
    // 登录授权
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
  },
}
</script>
<style lang="scss" scoped>
.tronActivity {
  padding-bottom: 20px;
  background: #fff;

  /deep/ .highcharts-color-name {
    color: #000 !important;
    font-size: 18px;
  }

  .banner {
    width: 100%;
    height: 600px;
    padding-top: 200px;
    // background: skyblue;
    color: #fff;
    background: url('../../../assets/img/activity/tron/back.png') no-repeat;
    background-size: 100% 100%;

    p:nth-child(1) {
      font-size: 56px;
      margin-bottom: 10px;
    }

    p:nth-child(2) {
      font-size: 28px;
    }
  }

  .cont {
    width: 1000px;
    margin: 0 auto;
    padding-bottom: 40px;

    .choice {
      padding-top: 100px;
      color: #333;

      p:nth-child(1) {
        font-size: 34px;
        margin-bottom: 10px;
      }

      p:nth-child(2) {
        font-size: 20px;
      }

      .tagCont {
        margin: 40px 0;

        .tag {
          width: 239px;
          height: 96px;
          border-radius: 5px;
          border: 1px solid #D1D1D1;
          margin-right: 15px;
          cursor: pointer;

          &.checked {
            border-color: #C62734;
          }

          img {
            width: 250px;
          }
        }

        .tag:last-child {
          margin-right: 0;
        }
      }

      .btn {
        width: 200px;
        margin: 30px auto 0;
      }

      .resultStatistics {
        width: 900px;
        min-height: 300px;
        margin: 100px auto 100px;
      }
    }

    .contWord {
      color: #333;

      .contWord1 {
        font-size: 34px;
        margin-bottom: 10px;
      }

      .contWord2 {
        font-size: 26px;
        margin-bottom: 50px;
      }

      .contList {
        margin-bottom: 40px;

        .imgIcon {
          flex: 1;

          img {
            display: inline-block;
            width: 260px;
          }
        }

        .word {
          flex: 2.3;
          // align-self: self-start;

          p {
            margin-bottom: 10px;
          }

          .font24 {
            font-size: 24px;
          }

          .font16 {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>

